<script setup lang="tsx">
import { CurdData } from '@/api/customer/types'
import FollowUpRecords from './FollowUpRecords.vue'
import OperationLog from './OperationLog.vue'
// 使用 ref 声明响应式变量 isExpanded

const isExpanded = ref(true)
defineProps({
  currentRow: {
    type: Object as PropType<Nullable<CurdData>>,
    default: () => null
  }
})
// 切换展开/收起状态的方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}
const activeName = ref('send_info')
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>旅程</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <!-- <el-tab-pane label="跟进记录" name="follow_up_record">
            <el-card shadow="always" class="card-container">
              <FollowUpRecords />
            </el-card>
          </el-tab-pane> -->
          <el-tab-pane label="操作日志" name="send_info">
            <el-card shadow="always" class="card-container">
              <OperationLog :id="currentRow?.id" />
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
